<template>
    <div class="Table">
        <ux-grid :data="tableData" :border="true" :header-cell-style="{
            color: 'rgba(0, 0, 0, 0.85)',
            fontSize: '14px',
            textAlign: 'left',
            fontWeight: 'bold',
            padding: 0,
            height: '32px',
            background: '#F5F5F5',
        }" :cell-style="{
            color: 'rgba(96,98,102,1)',
            fontSize: '14px',
            textAlign: 'left',
            padding: 0,
            height: '32px',
        }" :row-style="{
            color: 'rgba(96,98,102,1)',
            fontSize: '13px',
            textAlign: 'left',
            padding: 0,
            height: '32px',
        }" @row-click="rowClick" max-height="758" ref="uxGrid" :height="tableHeight" v-loading="loading"
            element-loading-spinner="el-icon-loading" element-loading-background="#f8f8f8"
            :element-loading-text="$t('message.bhView.loading')">
            <template slot="empty"> No data </template>
            <!-- <ux-table-column style="pointer-events:none;" type="checkbox" width="55"> </ux-table-column> -->
            <ux-table-column property="codName" align="left" title="装置名称">
                <template slot-scope="scope">
                    <div style="text-align: center;">
                        <el-input class="table-input" v-model="scope.row.pltName"
                            :class="!scope.row.isAAA ? '' : 'orange'"
                            @input="scope.row.pltName = $setMaxLength(scope.row.pltName, 30)"></el-input>
                    </div>
                </template>
            </ux-table-column>
            <ux-table-column property="codName" align="left" title="略称">
                <template slot-scope="scope">
                    <div style="text-align: center;">
                        <el-input class="table-input" v-model="scope.row.pltAbrv"
                            @input="scope.row.pltAbrv = $setMaxLength(scope.row.pltAbrv, 30)"></el-input>
                    </div>
                </template>
            </ux-table-column>
            <ux-table-column property="codName" align="center" title="運転開始">
                <template slot-scope="scope">
                    <div style="text-align: center;">
                        <!-- <el-input class="table-input center" v-model="scope.row.opeStart"
                            @input="scope.row.opeStart = formeDate(scope.row.opeStart)"></el-input> -->
                        <el-date-picker v-model="scope.row.opeStart" type="month" format="yyyy-MM"
                            :class="!scope.row.isAAA ? '' : 'orange'" value-format="yyyy-MM" placeholder=" "
                            class="ipt picker">
                        </el-date-picker>
                    </div>
                </template>
            </ux-table-column>
            <ux-table-column property="codName" align="left" title="開放周期(月)">
                <template slot-scope="scope">
                    <div style="text-align: center;">
                        <el-input class="table-input" v-model="scope.row.minCycle"
                            :class="!scope.row.isAAA ? '' : 'orange'"
                            @input="scope.row.minCycle = Number($setMyNum(scope.row.minCycle, '2 - 0')) == 0 ? null : Number($setMyNum(scope.row.minCycle, '2 - 0'))"></el-input>
                    </div>
                </template>
            </ux-table-column>
            <ux-table-column property="codName" align="center" title="登録開始">
                <template slot-scope="scope">
                    <div style="text-align: center;">
                        <!-- <el-input class="table-input center" v-model="scope.row.regStart"
                            @input="scope.row.regStart = formeDate(scope.row.regStart)"></el-input> -->
                        <el-date-picker v-model="scope.row.regStart" type="month" format="yyyy-MM"
                            :class="!scope.row.isAAA ? '' : 'orange'" value-format="yyyy-MM" placeholder=" "
                            class="ipt picker">
                        </el-date-picker>
                    </div>
                </template>
            </ux-table-column>
            <ux-table-column property="codName" align="center" title="検査当年">
                <template slot-scope="scope">
                    <div style="text-align: center;">
                        <!-- <el-input class="table-input center" v-model="scope.row.opeDate"></el-input> -->
                        <el-date-picker v-model="scope.row.opeDate" type="month" format="yyyy-MM" value-format="yyyy-MM"
                            placeholder=" " class="ipt picker">
                        </el-date-picker>
                    </div>
                </template>
            </ux-table-column>
            <ux-table-column property="codName" align="left" title="担当部署">
                <template slot-scope="scope">
                    <el-select placeholder=" " class="table-input" v-model="scope.row.secCode" size="mini">
                        <el-option v-for="item in getEnvSecList" :key="item.key" :label="item.label" :value="item.key">
                        </el-option>
                    </el-select>
                </template>
            </ux-table-column>
            <ux-table-column property="codName" align="center" title="表示順">
                <template slot-scope="scope">
                    <div style="text-align: center;">
                        <el-input class="table-input center" v-model="scope.row.ordr"
                            :class="!scope.row.isAAA ? '' : 'orange'"
                            @input="scope.row.ordr = $setMyNum(scope.row.ordr, '3 - 0').toString()"></el-input>
                    </div>
                </template>
            </ux-table-column>
        </ux-grid>


    </div>
</template>

<script>
import $ from "jquery";
import { getPlantRegList, updPlantReg, delPlantReg, getEnvSec } from "@/api/api";
import { getLocalStorage } from "@/utils/storage";
import _ from 'lodash-es';
export default {
    name: "DeviceLoginIndex",
    data() {
        return {
            tableData: [],
            tableDataClone: [],
            tableHeight: '350',
            loading: false,

            addFlg: false,
            activeRow: {},
            activeIndex: 0,
            // tempRow: {
            //     "pltName": "",
            //     "pltAbrv": "",
            //     "opeStart": "",
            //     "minCycle": 0,
            //     "regStart": "",
            //     "opeDate": "",
            //     "secName": "",
            //     "ordr": "",
            //     "pltCode": 0,
            //     "secCode": 0
            // },
            getEnvSecList: [],
            temp: '',
        };
    },
    components: {
    },
    watch: {},
    methods: {
        //点击表格行
        rowClick(row, index) {
            console.log(row);
            this.activeRow = row;
            this.activeIndex = row.ii;
            console.log(this.activeIndex);
        },
        formeDate(val) {
            console.log(val);
            if (val.length < this.temp.length) {
                this.temp = val;
                return val
            }
            let length = val.length
            if (length === 4) {
                val += '-';
                this.temp = val;
            }
            if (val.split('-')[1] > 12) {
                const [yearPart, dayPart] = val.split('-');
                val = `${yearPart}-12`;
                this.temp = val;
            }
            return val
        },
        addRowFn() {
            this.tableData.push({
                "pltName": "",
                "pltAbrv": "",
                "opeStart": "",
                "minCycle": null,
                "regStart": "",
                "opeDate": "",
                "secName": "",
                "ordr": "",
                "pltCode": 0,
                "secCode": 0,
                "ii": this.tableData.length,
                "isAAA": true
            });
            this.addFlg = true;
            this.activeIndex = this.tableData.length - 1;
            this.$refs.uxGrid.setCurrentRow(this.tableData[this.activeIndex]);
            setTimeout(() => {
                this.$refs.uxGrid.pagingScrollTopLeft(99999);
            }, 300);
            this.$emit("changeBtnFlgFn", true);
        },

        async saveFn() {
            this.tableData.forEach((item, index) => {
                item.opeDate = item.opeDate ? item.opeDate : '';
                item.opeStart = item.opeStart ? item.opeStart : '';
                item.regStart = item.regStart ? item.regStart : '';
                if (index < this.tableDataClone.length) {
                    if (_.isEqual(item, this.tableDataClone[index])) {
                        item.EditType = false;
                        item.AddType = false;
                    } else {
                        item.EditType = true;
                        item.AddType = false;
                    }
                } else {
                    item.EditType = false;
                    item.AddType = true;
                }
            })
            let dataJson = {
                DataList: this.tableData,
                UserID: getLocalStorage("userID"),
                // AddType: this.addFlg,
                // EditType: !_.isEqual(this.tableData, this.tableDataClone)
            };
            let res = await updPlantReg(dataJson);
            if (res.data.code == 0) {
                this.$message.success(res.data.msg);
                this.addFlg = false;
                this.initFn();
            } else {
                this.$alert(res.data.msg, '', {
	confirmButtonText: 'OK',
	type: 'warning',
});
            }
        },
        async delFn() {
            let dataJson = {
                PltCode: this.activeRow.pltCode,
                AddType: this.activeRow.pltCode == 0
            };
            let res = await delPlantReg(dataJson);
            if (!res) {
                return
            }
            if (res.data.code == 451) {
                this.$confirm(res.data.msg, '', {
                    confirmButtonText: 'OK',
                    cancelButtonText: 'Cancel',
                    type: 'warning'
                }).then(async () => {
                    this.initFn();
                }).catch(() => {

                });
                return
            }
            if (res.data.code == 0) {
                this.$message.success(res.data.msg);
                this.addFlg = false;
                this.initFn();
            } else {
                this.$alert(res.data.msg, '', {
	confirmButtonText: 'OK',
	type: 'warning',
});
            }
        },

        // 获取情报部署
        async getEnvSecApi() {
            let res = await getEnvSec({});
            this.getEnvSecList = res.data.data;
        },

        async initFn() {
            this.getEnvSecApi();
            this.tableData = [];
            this.loading = true;
            let res = await getPlantRegList({});
            this.$emit("changeBtnFlgFn", false);
            this.loading = false;
            if (res.data.code == -300) {
                this.$emit("changeBtnFlgFn1", true);
                return
            }
            this.$emit("changeBtnFlgFn1", false);
            if (res.data.code != 0) {
                return
            }
            this.tableData = res.data.data;
            this.tableData.forEach((item, index) => {
                item.ii = index;
            })
            if (this.activeIndex > this.tableData.length - 1) {
                this.activeIndex = 0;
            }
            this.activeRow = this.tableData[this.activeIndex];
            this.$refs.uxGrid.setCurrentRow(this.tableData[this.activeIndex]);
            setTimeout(() => {
                this.tableDataClone = _.cloneDeep(this.tableData);
            }, 300);
        },


        // 计算表格高度
        changeTableHeight() {
            let str = '.Table';
            this.tableHeight = $(str).height();
            window.addEventListener(
                "resize",
                () => {
                    return (() => {
                        this.tableHeight = $(str).height();
                    })();
                },
                false
            );
        }
    },
    created() { },
    mounted() {
        this.changeTableHeight();

        this.initFn();
    },
    beforeDestroy() { },
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.Table {
    height: 100%;
}

.table-input {
    ::v-deep .el-input__inner {
        background: none;
        border: 0 none;
        padding: 0;
        height: 30px;
    }

    // ::v-deep .el-input__inner:focus {
    //     border: 1px solid #dcdfe6;
    // }

    ::v-deep .el-input__icon {
        line-height: 32px;
        color: #909399;
    }

    ::v-deep .el-input__suffix {
        width: 32px;
        right: 0;
        background: #dee0e3;
    }
}

.picker {
    ::v-deep .el-input__inner {
        background: none;
        border: 0 none;
        padding: 0;
        height: 30px;
        padding-left: 30px !important;
        padding-right: 30px;
    }

    ::v-deep .el-input__icon {
        line-height: 32px;
        color: #909399;
    }

    ::v-deep .el-input__suffix {
        width: 32px;
        right: 40px;
        background: #dee0e3;
    }
}

.center {
    ::v-deep .el-input__inner {
        text-align: center;
    }
}

.right {
    ::v-deep .el-input__inner {
        text-align: right;
    }
}

::v-deep .elx-cell--title {
    padding: 0 16px;
}

::v-deep .elx-cell {
    width: 100%;
    padding: 0;
}

.Table {
    ::v-deep .el-input__inner {
        padding: 0 16px;
    }
}

.orange {
    ::v-deep .el-input__inner {
        background-color: #FEDDB1;
    }
}
</style>